<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>orderForm</title>
</head>
<body>
    <%= require('./common/header.htm')%>


    <div id="Content">
        <div id="progressBar">

            <!-- 三个圆 -->
            <button>提交订单</button>
            <button>确认订单</button>
            <button>订单完成</button>
            <!-- 进度条 -->
            <div>
                <span></span>
            </div>
        </div>
        <div id="Catalog">
            <div id="orderStep1" >
            <form  action="#" >

                <table>
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select name="cardType" id="cardType">
                                <option>
                                    
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td>
                            <input type="text" name="creditCard" th:field="*{creditCard}" id="creditCard">
                        </td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td>
                            <input type="text" name="expiryDate" th:field="*{expiryDate}" id="expiryDate">
                        </td>
                    </tr>

                </table>

                <div id="tab">
                    <ul>
                        <li id="billingLi" class="on">Billing Address</li>
                        <li id="shippingLi">Shipping Address</li>
                    </ul>
                    </br>
                    <div id="billing">
                        <table>
                            <tr>
                                <th colspan=2>Billing Address</th>
                            </tr>

                            <tr>
                                <td>First name:</td>
                                <td>
                                    <input type="text" name="billToFirstName" th:field="*{billToFirstName}" id="billToFirstName">
                                </td>
                            </tr>
                            <tr>
                                <td>Last name:</td>
                                <td>
                                    <input type="text" name="billToLastName" th:field="*{billToLastName}" id="billToLastName">
                                </td>
                            </tr>
                            <tr>
                                <td>Address 1:</td>
                                <td>
                                    <input type="text" name="billAddress1" th:field="*{billAddress1}" id="billAddress1">
                                </td>
                            </tr>
                            <tr>
                                <td>Address 2:</td>
                                <td>
                                    <input type="text" name="billAddress2" th:field="*{billAddress2}" id="billAddress2">
                                </td>
                            </tr>
                            <tr>
                                <td>City:</td>
                                <td>
                                    <input type="text" name="billCity" th:field="*{billCity}" id="billCity">
                                </td>
                            </tr>
                            <tr>
                                <td>State:</td>
                                <td>
                                    <input type="text" name="billState" th:field="*{billState}" id="billState">
                                </td>
                            </tr>
                            <tr>
                                <td>Zip:</td>
                                <td>
                                    <input type="text" name="billZip" th:field="*{billZip}" id="billZip">
                                </td>
                            </tr>
                            <tr>
                                <td>Country:</td>
                                <td>
                                    <input type="text" name="billCountry" th:field="*{billCountry}" id="billCountry">
                                </td>
                            </tr>


                        </table>
                    </div>
                <div id="shipping">
                    <table>
                        <tr>
                            <th colspan=2>Shipping Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td><input type="text"  name="order.shipToFirstName" th:field="*{shipToFirstName}" id="shipToFirstName"/></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td><input type="text"  name="order.shipToLastName"  th:field="*{shipToLastName}" id="shipToLastName"/></td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td><input type="text"  size="40" name="order.shipAddress1"  th:field="*{shipAddress1}"  id="shipAddress1" /></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td><input type="text"  size="40" name="order.shipAddress2"  th:field="*{shipAddress2}" id="shipAddress2" /></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><input type="text"  name="order.shipCity" th:field="*{shipCity}" id="shipCity"/></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><input type="text"  size="4" name="order.shipState"  th:field="*{shipState}" id="shipState"/></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td><input type="text"  size="10" name="order.shipZip" th:field="*{shipZip}" id="shipZip"/></td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td><input type="text"  size="15" name="order.shipCountry" th:field="*{shipCountry}" id="shipCountry"/></td>
                        </tr>
                    </table>
                </div>
                </div>
                <!-- <input id="Continue"  type="button" value="Continue"> -->
                <input type="button" value="Continue" id="orderFormSubmit" >
                <!-- onclick="window.location.href = './order-confirmOrder.html'" -->
            </form>
        </div>
    </div>
    </div>

<%= require('./common/footer.htm')%>
</body>
</html>